<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{common :: commomcss}"></head>
  <body>
    <!-- navbar-->
    <div th:replace="~{common :: commonheader}"></div>
    <div class="d-flex align-items-stretch">
      <div id="sidebar" class="sidebar py-3">
        <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">MAIN</div>
        <ul th:insert="~{common :: siderul}"></ul>
      </div>
      <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">

          <section class="py-5">
            <!--搜索框-->
            <form id="searchForm" class="ml-auto d-none d-lg-block" th:action="@{/admin/seachteacher}" method="post">
              <div class="form-group position-relative mb-0">
                <button type="submit" style="top: -3px; left: 0;" class="position-absolute bg-white border-0 p-0 btn btn-outline-primary"><i class="o-search-magnify-1 text-gray text-lg"></i></button>
                <input type="search" placeholder="请输入教师工号" class="form-control form-control-sm border-0 no-shadow pl-4" name="teacherid">
              </div>
            </form>
            <div class="row">

              <div class="col-lg-12 mb-12">
                <div class="card">
                  <h6>共有<td th:text="${teacherPageInfo.getTotal()}"/>位教师</h6>
                  <div class="card-body">
                    <table class="table table-striped table-hover card-text">
                      <thead>
                      <tr>
                        <th hidden="hidden">#</th>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>编辑</th>
                        <th>删除</th>
                      </tr>
                      </thead>
                      <tbody>
                        <tr th:each="teacher : ${teacherPageInfo.getList()}">
                          <th scope="row" th:text="${teacher.getId()}" hidden="hidden"></th>
                          <td th:text="${teacher.getTeacherid()}"></td>
                          <td th:text="${teacher.getUsername()}"></td>
                          <td th:text="${teacher.getTel()}"></td>
                          <td th:text="${teacher.getEmail()}"></td>
                          <td>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#teacherinfoedit" th:onclick="editteacherinfo([[${teacher}]]);">编辑</button>
                          </td>
                          <td>
                            <button type="button" class="btn btn-danger" th:onclick="delteacherinfo([[${teacher.id}]]);">删除</button>
                          </td>
                        </tr>

                      </tbody>
                    </table>
                    <!--弹出表单-->
                    <!-- 模态框示例（Modal） -->
                    <form method="post" th:action="@{/admin/updateTeacherInfo}" class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
                      <div class="modal fade" id="teacherinfoedit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                              </button>
                              <h4 class="modal-title" id="myModalLabel">教师信息</h4>
                            </div>
                            <div class="modal-body">
                              <form class="form-horizontal" role="form">

                                <!--表单中的项-->
                                <div class="form-group" hidden="hidden">
                                  <label class="col-sm-3 control-label">教师表ID</label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="modal_id" name="id"/>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-3 control-label">工号</label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="modal_teacherid" name="teacherid"/>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-3 control-label">姓名</label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="modal_username" name="username"/>
                                  </div>
                                </div>
                                <div class="form-group">
                                <label class="col-sm-3 control-label">手机号</label>
                                <div class="col-sm-9">
                                  <input type="text" class="form-control" id="modal_tel" name="tel"/>
                                </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-sm-3 control-label">Email</label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="modal_email" name="email"/>
                                  </div>
                                </div>
                              </form>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                              </button>
                              <button type="submit" class="btn btn-primary">提交</button><span id="tip"></span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                    <!---->
                  </div>
                </div>

                <!--分页-->
                <div class="row">
                  <div class="col-lg-12" >
                    <nav aria-label="..." style="margin: auto">
                      <ul class="pagination pagination-sm">
                        <a th:if="${teacherPageInfo.isHasPreviousPage()}" th:href="@{/admin/teacherinfo(pageNum=${teacherPageInfo.getPrePage()})}"><li class="page-item active" aria-current="page"><span class="page-link">上一页</span></li></a>
                        <a th:if="${teacherPageInfo.hasNextPage}" th:href="@{/admin/teacherinfo(pageNum=${teacherPageInfo.getNextPage()})}"><li class="page-item active" aria-current="page"><span class="page-link">下一页</span></li></a>
                      </ul>
                    </nav>
                  </div>
                </div>
                <!---->
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <div th:insert="~{common :: commomjs}"></div>
  </body>
<script>
  function editteacherinfo(teacher) {
    $("#modal_id").val(teacher.id);
    $("#modal_teacherid").val(teacher.teacherid);
    $("#modal_username").val(teacher.username);
    $("#modal_tel").val(teacher.tel);
    $("#modal_email").val(teacher.email);
  }
  function delteacherinfo(teacherid) {
    var tip = '确定删除这名教师?';
    if(confirm(tip) === true){
      $.ajax({
        url: '/admin/delTeacherInfo',
        data: {'teacherid':teacherid},
        type: 'post',
        success:function () {
          location.reload();
        }
      });
    }
  }

</script>
</html>